<script src="../../../Desktop/server/server.js"></script>
<template>

    <div class="my_Content">

        <mt-header style="background-color:#339933;height:3em;opacity:0.8;" fixed title="我的主页" class="header">
          
                  <mt-button @click="toLogin()" slot="right">
                <div id="longin_"style="margin-top:8px;color:#ffffff;" v-show="ressd==0">登录>></div>

            </mt-button>

            <i class="el-icon-setting" style="margin-right:5%; " @click="bianji()" slot="right" v-show="ressd==1"></i>
           

        </mt-header>

        <div class="box1">

            <div class=box2>

                <div id="circle">
                        <img src="../assets/top/shijian.jpg">
                </div>

                <div id="user" class="user">

                    <p>用户名：{{username}}</p>
                    <p v-show="no">{{ressd}}</p>

                    <span class="sp" style="margin-left: -47%;"> 我的回答</span>
                    <span class="sp" @click="guanzhu()"> 我关注的</span>
                    <span class="sp"> 关注我的</span>

                    <div>
                        <span style="margin-left: -50%;" class="pp">0</span>
                        <span class="pp">0</span>
                        <span class="pp">0</span>
                    </div>

                    <div>
                        <div class="jian" style="margin-left: -225%;" >个人简介</div>
                        <div class="jian" style="margin-top: -8%;margin-left: 25%;"><a>详情信息 v</a></div>
                    </div>

                     <div class="fenge1" style="width: 150%;margin-left: -75%;margin-top:20%;"></div> 
                </div>

            </div>

        <div class="fenge" style="margin-top:25%;opacity:0.5;"></div>

        <div>
            <div class="cc">全部动态</div>
            <div class="cc" style="margin-top:-5%;margin-left: 80%;"><i class="el-icon-arrow-down"></i></div>
        </div>

        <div class="fenge" style="opacity:0.5;"></div>
           
        <div>
            <div class="cc">我的回答</div>
            <div class="cc" style="margin-top:-5%;margin-left: 80%;"><i class="el-icon-arrow-down"></i></div>
        </div>

        <div class="fenge1"></div>

        <div>
            <div class="cc">我的提问</div>
            <div class="cc" style="margin-top:-5%;margin-left: 80%;"><i class="el-icon-arrow-down"></i></div>
        </div>

        <div class="fenge1"></div>

        <div>
            <div class="cc">我的分享</div>
            <div class="cc" style="margin-top:-5%;margin-left: 80%;"><i class="el-icon-arrow-down"></i></div>
        </div>


        <div class="fenge1"></div>

        <div>
            <div class="cc">我的收藏</div>
            <div class="cc" style="margin-top:-5%;margin-left: 80%;" @click="fn()"><i class="el-icon-arrow-down"></i></div>
             

            <div class="ssccd" v-if="willshow" v-for="value in books" @click="gtbooksView()">
                <div class="ssccd">{{value.title}}</div>
               
            </div> 
            
        </div>
  

        <div class="fenge" style="opacity:0.5;"></div>


        </div>


    </div>
</template>
<script>
import  {mapState} from "vuex"
import axios from 'axios'
import {mapMutations} from "vuex"

    export default{
        data(){
            return {
                willshow:'true',
                sid: '',
                username: '',
                ressd:'',
                no:false
            }
        },
        computed: {

               books(){
                return this.$store.state.userNameBooks;
            },

            ...mapState({
                btn:state =>state.btn
            })
        },

        mounted(){
            this.getUser();


        },
        methods: {
           getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        _this.sid = '';
                        _this.ressd = '0';
                        console.log('未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid;
                        _this.ressd = 1;
                        console.log(_this.username);
                        console.log(_this.sid);

                    }
                })
               
            },
                fn:function() {
                   if(this.willshow == true){
                   this.willshow = false;
               }else {
                   this.willshow = true;
               }
            },
              toRegistr: function () {
               this.$router.push('/login/registr')
            },

            bianji(){
               this.$router.push('/bianji');  
            },
            toRegistr: function () {
               this.$router.push('/login/registr')
           },
            toLogin: function () {
               this.$router.push('/login/login')
           },
            guanzhu: function () {
               this.$router.push('/guanzhu')
           },
            gtbooksView(){
               this.$router.push({path:"booksView"});
           }

    }

    }
</script>
<style>
    .my_Content {
        background-color: #ffffff;
        height: auto;
        padding-top: 10%;
        padding-bottom: 200%;
        margin-bottom: -18%;
    }

    .boxR {
        background-color: black;
        width: 20%;
        margin-top: 5%;
        margin-left: 77%;
        text-align: center;

    }

    .boxa {
        color: #99CC66;
        margin-left: 1%;

    }

    .box1 {
        width: 100%;
        height: 200px;
        margin: 0 auto;

    }

    .box2 {
        background-color: #ffffff;
        width: auto;
        height: 70%;
        margin-top: 3%;

    }


    #circle img{
        width:25%;
        height:100px;
        float: left;
        margin-left: 6%;
        margin-top: 4%;
        border: 2px solid;
        border-radius:50%;
    }

    .user {
        width: 50%;
        height: 100%;
        float: right;
        margin-left: 20%;
        margin-top: -30%;

    }

    .user p {
        font-size: 110%;  
        color:#339933;    
        
        margin-top: 15%;
        margin-left: -25%;
        text-align: left;

    }

    .sp{
        color:#339933; 
        margin-left: 10%;
          
        
    }

    .pp{
        color:#339933;
        margin-left:30%;
        font-size:110%;
    }

    .jian {
        color:#339933;
        margin-top:15%;
        
    }

    .cc {
        color:#339933;
        margin-top:4%;
        margin-left: -75%;
        font-size: 120%;
    }

   
    .ssccd {
        background-color: #E5E9F2;
        margin-top:3%;
        width: 90%;
        height: 30px;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        font-size: 1.2em;
        color:#339933;
    }


</style>
